import orderApi from '@/api/orderApi'
import { Select } from 'antd'
import { useEffect, useState } from 'react'

const Cluster = () => {
  const [cityId, setCityId] = useState(10001)
  const renderMap = (res: { lng: string; lat: string }[]) => {
    const map = new window.BMapGL.Map('map')
    const cityNames: { [k: number]: string } = {
      10001: '长沙',
      20001: '武汉',
      30001: '杭州',
      40001: '惠州',
      50001: '昆明'
    }
    map.centerAndZoom(cityNames[cityId], 12)
    map.enableScrollWheelZoom()
    const markers: any[] = []
    res.forEach(item => {
      const pt = new window.BMapGL.Point(item.lng, item.lat)
      markers.push(new window.BMapGL.Marker(pt))
    })
    new window.BMapGLLib.MarkerClusterer(map, { markers: markers })
    console.log('到这里了')
  }
  const getOrderCluster = async () => {
    const res = await orderApi.getOrderCluster(cityId)
    console.log(res)
    renderMap(res)
  }
  useEffect(() => {
    getOrderCluster()
  }, [cityId])
  return (
    <div className='cluster'>
      <Select
        style={{ width: 180 }}
        value={cityId}
        onChange={e => setCityId(e)}
        options={[
          { label: '长沙', value: '10001' },
          { label: '武汉', value: '20001' },
          { label: '杭州', value: '30001' },
          { label: '惠州', value: '40001' },
          { label: '昆明', value: '50001' }
        ]}
      ></Select>
      <div id='map' style={{ height: 800 }}></div>
    </div>
  )
}

export default Cluster
